<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置生成线路ID的基础信息</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
            background-color: rgb(255, 255, 255);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 300px;
            height: 300px;
            background-color: rgb(227, 223, 223);
            border-radius: 10px;
            padding: 20px;
        }

        select,
        input {
            width: 200px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid rgb(199, 199, 199);
            margin-top: 10px;
            padding-left: 5px;
        }

        button {
            width: 100px;
            height: 30px;
            margin-top: 20px;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }
    </style>
    <script>
        window.onload = function () {
            getRouteName();
        }

        async function getRouteName(){
            document.getElementById("routeName").value = await window.createRouteID_api.getRouteName_pre();
        }

        function start() {
            let routeType = document.getElementById("routeType").value;
            let routeArea = document.getElementById("routeArea").value;
            let routeAbbreviation = document.getElementById("routeAbbreviation").value;
            window.createRouteID_api.start(routeType, routeArea, routeAbbreviation);
        }
    </script>
</head>

<body>
    <div class="container">
        <!-- routeType, routeArea, departCity, routeName, routeAbbreviation; -->
        <span>线路类型 </span>
        <select id="routeType" name="routeType">
            <option disabled selected style="display: none;" value=""></option>
            <option value="国内旅游">国内旅游</option>
            <option value="国外游">国外游</option>
            <option value="地接社">地接社</option>
            <option value="周边游">周边游</option>
            <option value="单订">单订</option>
        </select><br>
        <span>线路区域 </span>
        <select id="routeArea" name="routeArea">
            <option disabled selected style="display: none;" value=""></option>
            <option value="粤北">粤北</option>
            <option value="珠三角">珠三角</option>
            <option value="国内游">国内游</option>
            <option value="粤西">粤西</option>
            <option value="粤东">粤东</option>
            <option value="出境游">出境游</option>
        </select><br>
        <span>线路名称 </span><input type="text" id="routeName" readonly><br>
        <span>线路简称 </span><input type="text" id="routeAbbreviation"><br>
        <button onclick="start()">开始</button>
    </div>
</body>

</html>